import React, { useEffect } from 'react'
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'
// import hongkong from 'echarts/map/json/province/xianggang.json'
import getCostData from '../../api/cost'
import { monthSale, kinds, compete } from '../../api/dashboard'

export default function Dashboard() {
  //表1:全国消费情况表图
  useEffect(() => {
    getCostData().then(res => {
      //获取数据，筛选出需要的数据
      let data = JSON.parse(res.data.data).areaTree[0].children
      data = data.map(item => {
        return {
          name: item.name,
          value: item.total.confirm
        }
      })
      //手动注册地图数据
      echarts.registerMap('china', china)
      //基于dom元素创建charts
      var myChart = echarts.init(document.getElementById('charts1'))
      myChart.setOption({
        title: {
          text: '全国用户消费情况(7月)',
          subtext: '单位（万元）'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} 万元'
        },
        visualMap: {
          type: 'piecewise',
          pieces: [
            { gte: 10000, color: '#ff0000 ' },
            { gte: 1000, lte: 9999, color: '#ff0000 ', colorAlpha: 0.8 },
            { gte: 100, lte: 999, color: '#ff0000 ', colorAlpha: 0.6 },
            { gte: 10, lte: 99, color: '#ff0000 ', colorAlpha: 0.4 },
            { gte: 1, lte: 9, color: '#ff0000 ', colorAlpha: 0.2 },
            { gte: 0, lte: 0, color: 'white ' }
          ]
        },
        series: [
          {
            name: '用户消费情况',
            type: 'map',
            mapType: 'china', // 自定义扩展图表类型
            label: {
              show: true
            },
            data: data
          }
        ]
      })
    })
  }, [])

  //表2:7个月销售数据
  useEffect(() => {
    monthSale().then(res => {
      // console.log(res.list)
      const myChart = echarts.init(document.getElementById('charts2'))
      const name = res.list.reduce((data, item) => {
        data.push(item.name)
        return data
      }, [])
      const dataSource = res.list.reduce((data, item) => {
        let data1 = {
          name: item.name,
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: JSON.parse(item.data)
        }
        data.push(data1)
        return data
      }, [])
      // console.log(dataSource)
      myChart.setOption({
        title: {
          text: '1-7月销量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: name
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: dataSource
      })
    })
  })

  //表3:各品类销售占比
  useEffect(() => {
    kinds().then(res => {
      // console.log(res)
      const myChart = echarts.init(document.getElementById('charts3'))
      myChart.setOption({
        backgroundColor: 'transparent',

        title: {
          text: '7月各商品种类销量',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#444'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '销售品类',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: res.kinds.sort(function (a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            label: {
              color: '#aaa'
            },
            labelLine: {
              lineStyle: {
                color: '#666'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200
            }
          }
        ]
      })
    })
  }, [])

  //表4:7月与竞争对手销量比较
  useEffect(() => {
    const myChart = echarts.init(document.getElementById('charts4'))
    compete().then(res => {
      // console.log(res)
      const name = res.data.reduce((data, item) => {
        data.push(item.name)
        return data
      }, [])
      const dataSource = res.data.reduce((data, item) => {
        let data1 = {
          name: item.name,
          type: 'bar',
          stack: '总量',
          label: {
            show: false,
            position: 'left'
          },
          data: JSON.parse(item.data)
        }
        data.push(data1)
        return data
      }, [])
      // console.log(dataSource)
      myChart.setOption({
        title: {
          text: '7月与竞争对手比较',
          left: 'left',
          top: 0,
          textStyle: {
            color: '#444'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: name
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value'
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30',
              '31'
            ]
          }
        ],
        series: dataSource
      })
    })
  }, [])
  return (
    <div
      style={{
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        flexWrap: 'wrap'
      }}
    >
      <div id="charts1" style={{ width: 550, height: 550, marginTop: 20 }} />
      <div id="charts4" style={{ width: 550, height: 550, marginTop: 20 }} />
      <div id="charts3" style={{ width: 550, height: 550, marginTop: 20 }} />
      <div id="charts2" style={{ width: 550, height: 550, marginTop: 20 }} />
    </div>
  )
}
